<template>
  <el-dialog
    v-model="dialog.visible"
    :title="dialogTitle"
    @open="openHandler"
    @close="closeHandler"
    :close-on-click-modal="false"
    append-to-body
    center
  >
    <el-form
      ref="dataForm"
      :rules="formRules"
      :model="entity"
      :disabled="operation == 3"
      label-suffix="："
    >
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item prop="parentId" label="上级部门">
            <dept-tree-select v-model="entity.parentId" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-input
            v-model="entity.deptOpenid"
            placeholder="请输入部门openid"
            clearable
          />
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item prop="deptName" label="部门名称">
            <el-input
              v-model="entity.deptName"
              placeholder="请输入部门名称"
              clearable
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item prop="deptLevel" label="部门层级">
            <el-input-number v-model="entity.deptLevel" :min="1" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item prop="deptManagerId" label="部门主管">
            <user-select v-model="entity.deptManagerId" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item prop="deptViceManagerId" label="部门副主管">
            <user-select v-model="entity.deptViceManagerId" />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>

    <template #footer>
      <cancel-button @click="dialog.visible = false" />
      <save-button
        v-if="operation != 3"
        :loading="loading"
        @click="saveHandler"
      />
    </template>
  </el-dialog>
</template>
<script>
import { save, update } from '@/api/upms/dept'

export default {
  name: 'DeptEdit',
  props: {
    dialog: {
      type: Object,
      required: true,
    },
  },
  emits: ['success'],
  data() {
    return {
      loading: false,
      entity: {},
      formRules: {
        parentId: [
          { required: true, message: '请选择上级部门', trigger: 'blur' },
        ],
        deptName: [
          { required: true, message: '请输入部门名称', trigger: 'blur' },
        ],
      },
      titleMap: {
        1: '新建部门',
        2: '编辑部门',
        3: '查看部门',
      },
      depts: [],
    }
  },
  computed: {
    operation() {
      return this.dialog.operation
    },
    dialogTitle() {
      return this.titleMap[this.dialog.operation]
    },
  },
  methods: {
    openHandler() {
      this.entity = Object.assign({}, this.dialog.entity)

      this.depts = []
      for (let i in this.dialog.depts) {
        let dept = this.dialog.depts[i]
        dept.level = 1
        this.addDept(dept)
      }
    },
    closeHandler() {
      this.entity = {}
      this.$refs.dataForm.clearValidate()
    },
    saveHandler() {
      this.$refs.dataForm.validate((valid) => {
        if (valid) {
          this.loading = true
          let edit = this.operation == 1 ? save : update
          edit(this.entity)
            .then(() => {
              this.dialog.visible = false
              this.$store.dispatch('loginUser/getUserDept')

              this.$message.success('保存成功')
              this.$emit('success')
            })
            .finally(() => {
              this.loading = false
            })
        }
      })
    },
    addDept(dept) {
      this.depts.push(dept)

      for (let i in dept.children) {
        let child = dept.children[i]
        child.level = dept.level + 1
        this.addDept(child)
      }
    },
  },
}
</script>
